import React, { memo, useEffect } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { DjToplistsWrap } from "./style";
import { getSizeImage } from "@/utils/format-utils";
import { NavLink } from "react-router-dom";
import { getProgramToplists } from "@/pages/discover/d-pages/djradio/store/actionType";

export default memo(function DjToplists() {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getProgramToplists(10));
  }, [dispatch]);

  const { djProgramToplists } = useSelector(
    (state) => ({
      djProgramToplists: state.getIn(["djPlaylists", "djProgramToplist"]),
    }),
    shallowEqual
  );
  return (
    <DjToplistsWrap>
      <div className="jm-toplists">
        <p>节目排行榜</p>
        <a>更多&gt;</a>
      </div>
      <div className="jm-g-ul-box">
        <ul>
          {djProgramToplists.length !== 0
            ? djProgramToplists.toplist.map((item, index) => {
                return (
                  <li key={item.program.id} className="jm-libox">
                    <div className="jm-rank fl">
                      <p className="jm-rank-ph">
                        {item.rank < 10 ? "0" + item.rank : item.rank}
                      </p>
                      {/* <p>{item.lastRank-item.rank}</p> */}
                      {item.lastRank - item.rank == 0 ? (
                        <p className="zeroP">
                          <i className="jmicon imgIcon zero"></i>
                          {item.lastRank - item.rank}
                        </p>
                      ) : item.lastRank == -1 ? (
                        <i className="jmicon imgIcon new"></i>
                      ) : item.lastRank - item.rank < 0 ? (
                        <p className="downP">
                          <i className="jmicon imgIcon down"></i>
                          {Math.abs(item.lastRank - item.rank)}
                        </p>
                      ) : (
                        <p className="upP">
                          <i className="jmicon imgIcon up"></i>
                          {item.lastRank - item.rank}
                        </p>
                      )}
                    </div>
                    <div
                      className="fl jm-imgbox"
                      style={{ width: "40px", height: "40px" }}
                    >
                      <img
                        src={getSizeImage(item.program.coverUrl, 40)}
                        alt=""
                      />
                    </div>
                    <div className="jm-name-box fl">
                      <NavLink
                        to={{
                          pathname: "/program",
                          search: "?id=" + item.program.id,
                        }}
                      >
                        {item.program.mainSong.name}
                      </NavLink>
                      <NavLink
                        to={{
                          pathname: "/djradio",
                          search: "?id=" + item.program.radio.id,
                        }}
                      >
                        {item.program.radio.name}
                      </NavLink>
                    </div>
                    <div className="jm-speed fl">
                      <div className="speedlength tablepng">
                        <i
                          style={{ width: (item.score * 100) / 196795 + "px" }}
                          className="speedscore tablepng"
                        ></i>
                      </div>
                    </div>
                  </li>
                );
              })
            : ""}
        </ul>
      </div>
    </DjToplistsWrap>
  );
});
